<template>
    <view class="min-h-screen relative">
        <up-navbar title=" " :safeAreaInsetTop="true" bgColor="transparent" :placeholder="true">
            <template #left>
                <view class="flex px-[24rpx] py-[16rpx] border-[1rpx] border-slate-200 rounded-[38rpx]">
                    <up-icon name="arrow-left" size="19" @click="goback"></up-icon>
                    <up-line direction="column" :hairline="false" length="16" margin="0 8px"></up-line>
                    <up-icon name="home" size="20" @click="gohome"></up-icon>
                </view>
            </template>
        </up-navbar>
        <view class="blurbg"></view>
        <view class="pt-[80rpx] px-[64rpx] mb-[116rpx]">
            <view class="text-[40rpx] font-bold text-[#000]">您好,</view>
            <view class="text-[40rpx] font-bold text-[#000]">欢迎使用XX小程序</view>
        </view>
        <view class="px-[64rpx] mb-[80rpx]">
            <up-form labelPosition="left" :model="form" :rules="rules" ref="form1">
                <up-form-item prop="phone" borderBottom ref="item1">
                    <view>
                        <view class="text-[26rpx] text-[#333] font-bold mb-[12rpx]">手机号</view>
                        <up-input v-model="form.phone" border="none" placeholder="请输入手机号"></up-input>
                    </view>
                </up-form-item>
                <up-form-item prop="code" borderBottom ref="item1">
                    <view>
                        <view class="text-[26rpx] text-[#333] font-bold mb-[12rpx]">验证码</view>
                        <view class="flex justify-between items-center">
                            <up-input v-model="form.code" border="none" placeholder="请输入验证码"></up-input>
                            <view class="text-[26rpx] text-[#46a7fd] font-normal">获取验证码</view>
                        </view>
                    </view>
                </up-form-item>
            </up-form>
        </view>
        <view class="bg-[#46A7FD] text-[32rpx] text-[#fff] font-noraml py-[26rpx] rounded-[40rpx] mx-[64rpx] text-center">登录</view>
        <view class="mx-[64rpx]">
            <up-divider text="其他登录方式"></up-divider>
        </view>
        <view @click="WXLOGIN" class="text-[32rpx] text-[#000] font-normal py-[26rpx] mx-[64rpx] border-[1rpx] border-[#000] rounded-[40rpx] text-center">一键登录</view>
        <view class="mt-[292rpx] flex justify-center items-center">
            <view class="mr-[8rpx]" @click="checkShow">
                <image v-if="!show" src="../static/kuang.png" mode="scaleToFill" class="w-[28rpx] h-[28rpx] block"/>
                <image v-else src="../static/gou.png" mode="scaleToFill" class="w-[28rpx] h-[28rpx] block"/>
            </view>
            <view>
                <text class="text-[22rpx] text-[#999999] font-normal" @click="checkShow">登录/注册表示您同意</text>
                <text class="text-[22rpx] text-[#46A7FD] font-normal">《用户协议》</text>
                <text class="text-[22rpx] text-[#999999] font-normal">和</text>
                <text class="text-[22rpx] text-[#46A7FD] font-normal">《隐私协议》</text>
            </view>
        </view>
    </view>
</template>

<script setup>
import {onLoad} from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { loginWeiXin } from '../../API/login';
import { getToken, setToken } from '../../utils/auth';
import { showToast } from '../../utils/utils';
let show = ref(false)
let popupShow = ref(false)
let form = reactive({
    phone:'',
    code:''
})
function goback() {
    uni.navigateBack()
}
function gohome() {
    uni.switchTab({
        url: '/pages/index/index'
    })
}
function checkShow(){
    show.value = !show.value
}
function WXLOGIN(){
    if(show.value){
        uni.login({
            success: async (res) => {
                try {
                    let {data} = await loginWeiXin({code:res.code})
                    setToken(data.token)
                    uni.navigateBack()
                } catch (error) {
                }
            }
        })
    }else{
        showToast('请勾选协议')
    }
}
onLoad(()=>{
    console.log('123123');
})
</script>

<style lang="scss" scoped>
.blurbg {
    top: 0;
    left: 0;
    width: 100%;
    height: 408rpx;
    position: absolute;
    background: linear-gradient(180deg, rgba(70, 167, 253, 0.4) 0%, rgba(255, 255, 255, 0) 100%);
}
</style>